<template>
	<div id='layout__goods'>
		<header class="page__header" v-if="showHeader">
			<h2 class="page__title">商品管理</h2>
			<el-button
				type="primary"
				size="mini"
				@click="$router.push('/goods/edit')"
			>
				新增商品
			</el-button>
		</header>
		<c-goods-category/>
		<router-view/>
	</div>
</template>

<script>
  /**
   *
   *
   *
   */
  import cGoodsCategory from '../../components/c-goods-category'
  import {mapState} from 'vuex'

  export default {
    name: "index",
    components: {
      cGoodsCategory
    },
    computed: {
      ...mapState([
        'categories',
        'hotList',
        'userInfo'
      ]),
      showHeader() {
        let {path} = this.$route
        return path === '/goods/manage'
      }
    },
    watch: {
      $route: {
        deep: true,
        immediate: true,
        handler({path}) {
          if (path !== '/index' && path !== '/goods/manage') return false
          this.$bus.$emit('getGoodsList')
        }
      }
    },
  }
</script>

<style lang='less'>
	#layout__goods {
		flex-grow: 1;
		flex-shrink: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
</style>
